<template>
  <div class="title">
    <template v-for="(title, index) in titles" :key="title">
      <div class="titleItem" @click="titleItemClick(index)" :class="{ active: currentIndex === index }">
        <span>{{ title }}</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  emits: ['currentIndex'],
  // 在此处注册要发出的事件
  props: ['titles', 'changePage'],
  data() {
    return {
      currentIndex: 0,
    }
  },
  methods: {
    titleItemClick(index) {
      this.currentIndex = index
      this.$emit('currentIndex', index)
      // this.changePage(index)
    },
  },
}
</script>

<style scoped>
.title {
  display: flex;
  text-align: center;
}
.titleItem {
  flex: 1;
}
.titleItem.active {
  color: red;
}
.titleItem.active span {
  border-bottom: 3px solid rgb(221, 19, 53);
}
</style>
